<template>
  <div class="home">

      <h3>图片文字识别</h3>
      <div>
          <span>上传图片</span>
          <input v-on:change="get_file" id="file" type="file">
      </div>
      <div>
          <img v-if="upload_src" v-bind:src="upload_src" alt="">
      </div>

      <button v-on:click="getText">提交识别</button>

      <div class="result-title">检测结果</div>
      <div class="result">

          <div v-for="(item,index) in text_tesult" v-bind:key="index">
              {{item.text}}
          </div>
      </div>
  </div>
</template>

<script>
    import axios from 'axios'
    // axios.defaults.withCredentials=true;
// @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
    data: function () {

        return {
            file: '',
            text_tesult:[],
            upload_src:''
        }
    },
  methods:{

      fileToImage:function(file){
          var t = this;
          var reader = new FileReader();
          reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
          reader.onload = function(event){
              // var img = document.getElementById("img").children[0];
              // img.src = event.target.result;//base64
              t.upload_src = event.target.result;//base64
          }
      },



      fileToCanvas:function(file){
          var reader = new FileReader();
          var t = this;
          reader.readAsDataURL(file);//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
          reader.onload = function(event){
              var image = new Image();
              image.src = event.target.result;
              image.onload = function(){
                  var canvas = document.getElementById("canvas");
                  var imageCanvas = canvas.getContext("2d");
                  imageCanvas.drawImage(image, 0, 0,300,300);
                  t.canvasToImage( canvas );
              }
          }
      },


      canvasToImage:function(canvas){
          var image = new Image();
          image.src = canvas.toDataURL("image/png");//base64
      },

      get_file: function (e) {

          console.log(e.target)
          console.log(e.target.file)
          console.log(e.target.files)
          this.file = e.target.file;

          // this.fileToCanvas(e.target.files[0]);
          this.fileToImage(e.target.files[0]);
      },

      getText:function(){

            var t = this;
          // var url = 'http://ai.x-mii.com:39123/predict/chinese_ocr_db_crnn_mobile';
          var url = 'http://ai.x-mii.com:39124/ocr2';

          var file = document.getElementById('file').files[0];

          // axios.post( url, data,{
          var formData = new FormData();
          formData.append('file', file)
          axios.post(url, formData, {
              headers: {
                  'Content-Type': 'application/json'
              }
          }).then(function (res) {
              console.log( res.data )
              if (res.data && res.data.length ) {

                  t.text_tesult = res.data[0].data;

                  // t.show_result( res.data.data );
              }

          });
      },

      // show_result: function ( text_list ) {
      //
      //     this.text_tesult
      //     if(Array.isArray( text_list )){
      //
      //
      //     }
      // }

  },
  created:function(){

    console.log(123);
      // this.getText();
  },
  components: {
      // HelloWorld
  }
}
</script>

<style>
    img{
        border:solid 1px #2c3e50;
        width:400px;
    }
    .result-title{
        margin-top:20px
    }
    .result{
        text-align: left;
        width: 960px;
        margin: 0 auto;
        border: dashed 1px;
        margin-top: 20px;
        line-height: 2;
        padding: 10px;
    }
</style>
